
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>响应式网格（栅格化）布局</title>
		<link rel="stylesheet" type="text/css" href="../css/test9.css"/>
	</head>
	<body>
		<div class="container">
			
			<div class="row">
				<div class="col-md-4 col-sm-6 col">大四小六</div>
				<div class="col-md-4 col-sm-6 col">大四小六</div>
				<div class="col-md-4 col-sm-12 col">大四小十二</div>
			</div>			
			<div class="row">
				<div class="col-md-3 col-sm-3 col">大三小三</div>
				<div class="col-md-6 col-sm-6 col">大六小六</div>
				<div class="col-md-3 col-sm-3 col">大三小三</div>
			</div>
			
			<div class="row">
				<div class="col-md-1 col col-sm-2">大一小二</div>
				<div class="col-md-1 col col-sm-2">大一小二</div>
				<div class="col-md-2 col col-sm-8">大二小八</div>
				<div class="col-md-2 col col-sm-3">大二小三</div>
				<div class="col-md-6 col col-sm-3">大六小三</div>
			</div>
		</div>
	</body>
</html>
